import React, { Component } from 'react'

export default class CarList extends Component {
    state = {
        open: false,
        allChecked:false
    }
    get totalPrice() {
        const { list } = this.props
        return list.filter(item => item.status).reduce((sum, item) => {
            return sum += item.price * item.count
        }, 0)
        // return list.reduce((sum, item) => {
        //     return sum += item.price * item.count
        // }, 0)
    }
    changeOpen = () => {
        this.setState({
            open: true
        })
    }
    changeOpen2 = () => {
        this.setState({
            open: false
        })
    }
    changeCountByEnter = (event, id) => {
        const value = event.target.value
        console.log(value, id);
        this.props.changeCount2(id, value)
    }
    changeSignStatus = (e,id) => {
        const bool = e.target.checked;
        console.log(id);
        this.props.changeStatus(id,bool)
    }
    render() {
        const { open,allChecked } = this.state
        const { list } = this.props
        return (
            <div>
                <table style={{ width: "100%", borderCollapse: "collapse" }}>
                    <thead>
                        <tr>
                            <th>
                                <input defaultChecked={allChecked} type="checkbox" />
                            </th>
                            <th>编号</th>
                            <th>图片</th>
                            <th>标题</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list.map(item => {
                            return (
                                <tr key={item.id}>
                                    <td>
                                        <input
                                            defaultChecked={item.status}
                                            type="checkbox"
                                            onChange={ (e)=>this.changeSignStatus(e,item.id) }
                                        />
                                    </td>
                                    <td>{item.id}</td>
                                    <td>
                                        <img width="40px" src={item.imgname} alt="" />
                                    </td>
                                    <td>{item.title}</td>
                                    <td
                                        onDoubleClick={this.changeOpen}>
                                        {open ?
                                            <input type="text"
                                                defaultValue={item.price}
                                                onChange={(e) => item.price = e.target.value}
                                                onBlur={this.changeOpen2}
                                            />
                                            : item.price}</td>
                                    <td>
                                        <button disabled={item.count == 1}>-</button>
                                        <input
                                            style={{ width: "80px" }}
                                            type="text"
                                            defaultValue={item.count}
                                            onBlur={(e) => this.changeCountByEnter(e, item.id)}

                                        />
                                        <button onClick={() => this.props.changeCount(item.id)}>+</button>
                                    </td>
                                    <td>{item.price * item.count}</td>
                                    <td>
                                        <button>删除</button>
                                    </td>
                                </tr>
                            )
                        })}

                    </tbody>
                </table>
                <p>{this.totalPrice}</p>
            </div>
        )
    }
}
